<template>
  <div class="search-bar">
    <el-form :inline="true" :model="formItem" class="form-filter" size="mini">
      <el-form-item>
        <el-input v-model="formItem.s_name" clearable placeholder="请输入名称/编号..." @keyup.enter.native="search" @change="onMixedInputChange" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="formItem.s_status" clearable placeholder="请选择任务状态" @change="onMixedSelectChange">
          <el-option v-for="(item) in status" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" plain icon="el-icon-search" @click="search" />
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

// 定义一个查询表单原始项
const formItem = {
  s_name: '',
  s_code: '',
  s_status: ''
}

export default {
  name: 'MaintainTaskTableFilter',
  data() {
    return {
      /** CMDB模型树 */
      cmdbModels: null,
      formItem: {
        ...formItem
      },
      select: '',
      placeholder: '',
      status: []
    }
  },
  mounted() {
    this.status = [{ value: 'undo', label: '未执行' },
      { value: 'doing', label: '执行中' },
      { value: 'done', label: '已执行' }]
  },
  methods: {
    // 查询按钮点击事件处理
    search: function() {
      this.formItem.s_code = this.formItem.s_name
      this.$parent.filter(this.formItem)
    },
    // 重置按钮点击事件处理
    reset: function() {
      this.formItem = {
        ...formItem
      }
      this.search()
    },
    onMixedInputChange(value) {
      if (value === '') {
        this.search()
      }
    },
    onMixedSelectChange(value) {
      this.search()
    }
  }
}
</script>
